<script setup>
import {computed} from "vue";
import {filterTree} from "@/utils/index.js";
import {MENU_TYPE} from "@/common/constant.js";
import {tree} from "@/apis/sys/menu.js";


onMounted(() => {
  loadTableData()
})

const valueModel = defineModel('value')
const props = defineProps({
  disabled: {
    type: Boolean,
    default: false
  }
})
const tableData = ref([])

const loadTableData = async () => {
  const {code, data} = await tree()
  if (code === 0) {
    tableData.value = data
  }
}
const menuParentOptions = computed(() => {
  return [
    {
      name: '顶级',
      id: '0',
      children: filterTree(tableData.value, MENU_TYPE.BUTTON, false)
    }
  ]
})
</script>

<template>
  <n-tree-select
      :disabled="props.disabled"
      :options="menuParentOptions"
      v-model:value="valueModel"
      label-field="name"
      key-field="id"
  />
</template>

<style scoped>

</style>